<ng-container *ngIf="!searchFlag;else focusElse">
  <Navbar [icon]="icon" [rightContent]="rightContent" (onLeftClick)="onLeftClick()">
    NavBar
  </Navbar>
  <ng-template #icon>
    <Icon [type]="'left'"></Icon>
  </ng-template>
  <ng-template #rightContent>
    <Icon [type]="'search'" [ngStyle]="{ marginRight: '16px' }" (click)="showSearch()"></Icon>
    <Icon [type]="'ellipsis'" (click)="onOpenChange($event)"></Icon>
  </ng-template>
</ng-container>
<ng-template #focusElse>
  <div style="border-bottom: 1px solid #ddd;">
    <SearchBar [placeholder]="'自动获取光标'" [setFocus]="autoFocus" (onCancel)="cancelSearch()"
               (onSubmit)="search()" [(ngModel)]="searchText"></SearchBar>
  </div>
</ng-template>

<TabBar
        [hidden]="hidden"
        [barTintColor]="'white'"
        [ngStyle]="{ height: (this.height-45) + 'px' }"
        [activeTab]="selectedIndex"
        [unselectedTintColor]="unselectedTintColor"
        tabBarPosition="bottom"
        (onPress)="tabBarTabOnPress($event)"
>
  <TabBarItem [title]="'Life'" key="1" [badge]="1" [icon]="icon1" [selectedIcon]="icon11">
    <ng-template #icon1>
      <div
              style="width:22px;height: 22px;background: url('https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg') center center / 21px 21px no-repeat;"
      ></div>
    </ng-template>
    <ng-template #icon11>
      <div
              style="width:22px;height: 22px;background: url('https://zos.alipayobjects.com/rmsportal/iSrlOTqrKddqbOmlvUfq.svg') center center / 21px 21px no-repeat;"
      ></div>
    </ng-template>
    <div style="background-color: white; height: 100%; text-align: center">
      <div style="padding-top: 60px">Clicked Life tab， show Life information</div>
      <ng-container>
        <ng-template [ngTemplateOutlet]="content"></ng-template>
      </ng-container>
    </div>
  </TabBarItem>
  <TabBarItem [title]="'Koubei'" key="2" [badge]="'new'" [icon]="icon2" [selectedIcon]="icon22">
    <ng-template #icon2>
      <div
              style="width:22px;height: 22px;background: url('https://gw.alipayobjects.com/zos/rmsportal/BTSsmHkPsQSPTktcXyTV.svg') center center / 21px 21px no-repeat;"
      ></div>
    </ng-template>
    <ng-template #icon22>
      <div
              style="width:22px;height: 22px;background: url('https://gw.alipayobjects.com/zos/rmsportal/ekLecvKBnRazVLXbWOnE.svg') center center / 21px 21px no-repeat;"
      ></div>
    </ng-template>
    <div style="background-color: white; height: 100%; text-align: center">
      <div style="padding-top: 60px">Clicked Koubei tab， show Koubei information</div>
      <ng-container>
        <ng-template [ngTemplateOutlet]="content"></ng-template>
      </ng-container>
    </div>
  </TabBarItem>
  <TabBarItem [title]="'Friend'" key="3" [dot]="true" [icon]="icon3" [selectedIcon]="icon33">
    <ng-template #icon3>
      <div
              style="width:22px;height: 22px;background: url('https://zos.alipayobjects.com/rmsportal/psUFoAMjkCcjqtUCNPxB.svg') center center / 21px 21px no-repeat;"
      ></div>
    </ng-template>
    <ng-template #icon33>
      <div
              style="width:22px;height: 22px;background: url('https://zos.alipayobjects.com/rmsportal/IIRLrXXrFAhXVdhMWgUI.svg') center center / 21px 21px no-repeat;"
      ></div>
    </ng-template>
    <div style="background-color: white; height: 100%; text-align: center">
      <div style="padding-top: 60px">Clicked Friend tab， show Friend information</div>
      <ng-container>
        <ng-template [ngTemplateOutlet]="content"></ng-template>
      </ng-container>
    </div>
  </TabBarItem>
  <TabBarItem [title]="'My'" key="4" [icon]="icon4" [selectedIcon]="icon44">
    <ng-template #icon4>
      <div
              style="width:22px;height: 22px;background: url('https://zos.alipayobjects.com/rmsportal/asJMfBrNqpMMlVpeInPQ.svg') center center / 21px 21px no-repeat;"
      ></div>
    </ng-template>
    <ng-template #icon44>
      <div
              style="width:22px;height: 22px;background: url('https://zos.alipayobjects.com/rmsportal/gjpzzcrPMkhfEqgbYvmN.svg') center center / 21px 21px no-repeat;"
      ></div>
    </ng-template>
    <div style="background-color: white; height: 100%; text-align: center">
      <div style="padding-top: 60px">Clicked My tab， show My information</div>
      <ng-container>
        <ng-template [ngTemplateOutlet]="content"></ng-template>
      </ng-container>
    </div>
  </TabBarItem>
</TabBar>
<ng-template #content>
  <a style="display: block; margin-top: 40px; margin-bottom: 20px; color: #108ee9" (click)="showNextTabBar($event)">
    Click to next tab-bar
  </a>
  <a style="display: block; margin-top: 20px; margin-bottom: 20px; color: #108ee9" (click)="showTabBar($event)">
    Click to show/hide tab-bar
  </a>
</ng-template>
